<template>
  <div class="search">
    <div>
      <van-icon size="28" name="search" color="#d5682a" />
      想吃什么搜这里，比如川菜
    </div>
  </div>
  <!-- <div class="border">
    hello
  </div> -->
</template>

<script>
import { Icon } from 'vant'
export default {
  components: {
    'van-icon': Icon
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/border.styl'
.search
  padding .1rem .15rem
  div
    height .4rem
    border_1px(1px, #d5682a, solid, 0.06)
    // border solid 1px #d5682a
    // border-radius .06rem
    background #fff
    display flex
    align-items center
    justify-content center

// .border
//   width 1rem
//   height 1rem
//   background yellow
//   margin-left .2rem
//   position relative
//   &::after
//     position absolute
//     left 0
//     top 0
//     content ''
//     border solid 1px red

//     @media screen and -webkit-device-pixel-radio

//     width 300%
//     height 300%
//     transform scale(0.333333)

//     transform-origin 0 0


</style>